<template>
    <nav>
        <!-- 声明式导航 -->
        <ul>
            <router-link to="/film" tag="li" activeClass="myactive">
                <span class="iconfont icon-dianying ico"></span>
                <span class="item">电影</span>
            </router-link>
            <router-link to="/cinema" tag="li" activeClass="myactive">
                <span class="iconfont icon-yingyuan ico"></span>
                <span class="item">影院</span>
            </router-link>
            <router-link to="/information" tag="li" activeClass="myactive">
                <span class="iconfont icon-zixun ico"></span>
                <span class="item">资讯</span>
            </router-link>
            <router-link to="/center" tag="li" activeClass="myactive">
                <span class="iconfont icon-wode_huaban1 ico"></span>
                <span class="item">我的</span>
            </router-link>
        </ul>
    </nav>
</template>
<style lang="scss" scoped>
    .myactive {
        color:#ff5f16;
    }
    nav{
        border-top:1px solid #eee;
        position:fixed;
        bottom:0px;
        left:0px;
        width:100%;
        height:50px;
        background:white;
        z-index: 100;
        ul{
            display:flex;
            li{
                list-style-type: none;
                flex:1;
                height: 40px;
                line-height:40px;
                text-align:center;
                span {
                    height:20px;
                    line-height: 20px;
                    display: block;
                }
                .ico {
                    padding-top:8px;
                    font-size: 28px;
                }
                .item {
                    padding-top:0px;
                    font-size: 14px;
                }
            }
        }
    }
</style>
